<template>
  <a-modal
    :visible="fileVisible"
    title="批量上传"
    width="500px"
    @ok="submit"
    @cancel="offModal(false)"
  >
    <div class="content">
      <div class="top">
        <div>模板下载:</div>
        <div class="download" @click="downloadTemplate">点击下载</div>
      </div>
      <div class="top">
        <div>文件上传:</div>
        <a-upload-dragger class="up-item" :before-upload="beforeUploadRight">
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            {{ file && file.name !== "" ? file.name : "点击选择上传的文件" }}
          </p>
        </a-upload-dragger>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from "vue";
import { Modal, message } from "ant-design-vue";
import {
  templateDownload,
  fileUpload,
} from "@/services/intelligentAssistant.service";
import downloadFileStream from "@/utils/fileStreamDownload.js";
const props = defineProps({
  id: {
    type: String,
  },
  fileName: {
    type: String,
  },
  userId: {
    type: String,
  },
  type: {
    type: String,
    default: "",
  },
  fileVisible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["offFileModal"]);
const file = ref(null);
const beforeUploadRight = (fileItem) => {
  let maxSize = 10 * 1024 * 1024;
  if (
    !/\.(xlsx|xls|XLSX|XLS|xlsm|XLSM|xlsb|XLSB|xlt|XLT|xml|XML)$/.test(
      fileItem.name
    )
  ) {
    Modal.error({
      title: "错误",
      content: "上传文件只能为excel文件",
    });
    file.value = null;
  } else {
    if (fileItem.size > maxSize) {
      Modal.error({
        title: "错误",
        content: "上传文件大小最大10M",
      });
      file.value = null;
    } else {
      file.value = fileItem;
    }
  }
  return false;
};
async function downloadTemplate() {
  const res = await templateDownload({
    type: props.type,
  });
  if (res && res instanceof Blob) {
    downloadFileStream(res, props.fileName);
  } else {
    Modal.info({
      title: "提示",
      content: "服务异常,模板下载失败",
    });
  }
}
async function submit() {
  if (!file.value || !file.value.name) {
    return Modal.info({
      title: "提示",
      content: "请选择需要上传的文件",
    });
  }
  let formData = new FormData();
  formData.append("file", file.value);
  formData.append("userId", props.userId);
  formData.append("type", props.type);
  const res = await fileUpload(formData);
  if (res && res?.code === 200) {
    message.success(res?.message || "批量上传上传成功", 2);
    await offModal(true);
  } else {
    Modal.info({
      title: "提示",
      content: res?.message || "批量上传失败，请检查无误后重新尝试",
    });
  }
}
function offModal(type) {
  file.value = null;
  emit("offFileModal", type);
}
</script>

<style scoped lang="less">
.content {
  color: #333;
  .top {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    .up-item {
      flex-grow: 1;
    }
    .download {
      color: #2f54eb;
      cursor: pointer;
    }
    .download:hover {
      text-decoration: underline;
    }
  }
}
/deep/ .ant-modal-footer {
  text-align: center;
  .ant-btn {
    margin-right: 20px;
  }
}
/deep/ .ant-upload-list-text {
  display: none;
}
</style>
